<template>
  <div class="home">
    <Public />

    <!-- <img alt="Vue logo" src="../assets/logo.png"> 
    <HelloWorld msg="Welcome to Your Vue.js App"/>-->

    <router-link to="/PageIndex">pageindex</router-link>

    <el-button plain @click="GetlNotification('按钮传参')"> Success </el-button>

    <el-button type="success" @click="dialogFormVisible = true">打开页面</el-button>

    
    <router-link to="/Father">跳转弹窗</router-link>
    <!-- <router-link to="/DiologIndex">弹窗界面</router-link> -->
    <router-link to="/about">about</router-link>
    <router-link to="/HelloWorld">HelloWorld</router-link>
    <router-link to="/Menu">Menu</router-link>
    <!-- <router-link to="/Menu">Menu</router-link> -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="RoleName" label="角色名称" />
      <el-table-column prop="Browers" label="浏览" />
      <el-table-column prop="Edit" label="编辑" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click.prevent="Edit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column  label="操作" >
        <template #default="action">
          <el-button type="text" size="small" @click="handleClick">Detail</el-button>
          <el-button type="text" size="small">Edit</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <el-input v-model="value" placeholder="Please input" />
    <el-skeleton :rows="5" animated :loading="loading" />
    home页面
    <!-- <router-view></router-view> -->
  </div>
  <el-button type="text" @click="dialogFormVisible = true"
    >open a Form nested Dialog</el-button
  >

  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai"></el-option>
          <el-option label="Zone No.2" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >Confirm</el-button
        >
      </span>
    </template></el-dialog
  >
</template>


<script>
//import { defineComponent } from 'vue'
import {  reactive } from 'vue'
import dayjs from "dayjs";
import { ElNotification } from "element-plus";
//import MyView from "../components/Public/MyView.vue"
// import Public from '../components/Public/Menu.vue'

import instance from "../Utils/Request";
export default {
  name: "Home",
  setup() {
   const state = reactive({
     dialogFormVisible:false
   })
   return{ 
    state
   }
  },
  // components: {
  // //  Public

  //   //ElNotification
  //  },

  // HelloWorld
  data() {
    return {
      loading: false,
      currentDate: dayjs().format("YYYY-MM-DD"),
      tableData: "",
      centerDialogVisible: false,
      value: "我是model",
    };
  },
  mounted: function () {
    instance.post("Home/Index", JSON.stringify(this.account)).then((res) => {
      if (res.data.code == "1") {
        let ShowData = [];
        let result = res.data.data;
        for (let i = 0; i < result.length; i++) {
          let obj = {};
          obj.Id = result[i].roleID;
          obj.RoleName = result[i].roleName;
          obj.Browers = result[i].browers;
          obj.Edit = result[i].edit;
          ShowData[i] = obj;
        }
        this.tableData = ShowData;
        this.GetlNotification(res.data.msg);
      }
    });
  },
  methods: {
    openWindow() {
      // dialog.dialogVisible=true;
    },
    GetlNotification(msg) {
      ElNotification({
        title: "提示信息",
        message: msg,
        duration: 1000, //关闭时间
      });
    },
    Edit(params) {
      this.centerDialogVisible = true;
      console.log(params);
      return params;
    },
  },
  
};
</script>
